import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import { practiceApi } from '@/reqeust'
import './practice.less'
import { Button, Grid } from '@material-ui/core'
import { loginExpire } from '@/utils'
import GoBackButton from '@/components/GoBackButton'

const TestType = {
  ALL: 'all', ERR: 'err', DONE: 'done', NOTDONE: 'notdone'
}

const actionKey = {
  all: '全部', qa: '问答', fill: '填空', one: '单选', check: '判断', code: '编程', many: '多选'
}

const numberLimit = [5, 10, 20, 30, 50, 100]

export default function Practice(props) {
  const history = useHistory()

  const [qsType, setQSType] = useState([])

  useEffect(() => {
    practiceApi({
      actionCode: props.match.params.code,
      testType: TestType.ALL
    }).then(res => {
      const data = JSON.parse(JSON.stringify(res.data))
      data.forEach(item => {
        item.text = actionKey[item.key]
      });
      setQSType(data)
    }).catch(err => {
      loginExpire(err, history, props)
    })
  })


  const actionType = [
    { id: 1, text: '全部', type: 'all' },
    { id: 2, text: '未做', type: 'notdone' },
    { id: 3, text: '已做', type: 'done' },
    { id: 4, text: '错误', type: 'err' },

  ]
  const [code, setCode] = useState('all')
  const [type, setType] = useState('all')
  const [limit, setLimit] = useState(5)

  const gotoList = ()=>{
    history.push({pathname:'/practicelist',state:{
      testNum:limit,testType:code,actionCode:props.match.params.code,questionType:type
    }})
  }
  return (
    <div className="practice-wraper">
      <section className="to-practice">
        <Button variant="contained" onClick={gotoList} color="primary">进入练习模式</Button>
        <Button variant="contained" className="exam">进入考试模式</Button>
      </section>
      <section className="current-action">
        <h3>选择类型</h3>
        {/* <div className="action-wraper">
          {
            actionType.map(item => {
              return (
                <div className={['btn', code === item.type ? 'active' : ''].join(' ')} key={item.id} onClick={() => setCode(item.type)}>{item.text}</div>
              )
            })
          }
        </div> */}
        <Grid container >
          {
            actionType.map(item => {
              return (
                <Grid item key={item.id} xs={4}><div className={['btn', code === item.type ? 'active' : ''].join(' ')} onClick={() => setCode(item.type)}>{item.text}</div></Grid>
              )
            })
          }
        </Grid>
      </section>
      <section className="current-type">
        <h3>选择题目</h3>
        {/* <div className="type-wraper">
            {
              qsType.map(item=>{
                return (
                  <div key={item.key} className={['btn',type === item.key? 'active' : ''].join(' ')} onClick={()=>setType(item.key)}>{item.text}({item.value})</div>
                )
              })
            }
          </div> */}
        <Grid container>
          {
            qsType.map(item => {
              return (
                <Grid key={item.key} item xs={6}><div className={['btn', type === item.key ? 'active' : ''].join(' ')} onClick={() => setType(item.key)}>{item.text}({item.value})</div></Grid>
              )
            })
          }
        </Grid>
      </section>
      <section className="limit">
        <h3>做题数量</h3>
        <Grid container>
          {
            numberLimit.map(item => {
              return (<Grid item xs={4} key={item}>
                <div onClick={()=>setLimit(item)} className={['btn', limit === item ? 'active' : ''].join(' ')}>{item}</div>
              </Grid>)
            })
          }
        </Grid>
      </section>
      <GoBackButton></GoBackButton>
    </div>
  )
}
